﻿
@{
    Layout = null;
    ViewData["Title"] = "购买商品";

    var u = (ViewData["user"] as Models.Users);
    var m = u.ShippingAddress.FirstOrDefault();
    var n = ViewData["notice"] as Models.Notice;
    var s = ViewData["setting"] as List<Models.SystemSetting>;
    var cashs = ViewBag.Cash as List<Models.ItemList>;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title>@ViewData["Title"]</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <environment include="Development">
        <link rel="stylesheet" href="~/layer/css/layui.css" media="all" />
        <link rel="stylesheet" href="~/layer/css/admin.css" media="all" />
        <link rel="stylesheet" href="~/layer/css/template.css" media="all" />
        <style>
            .media img {
                display: block;
                max-width: 100%;
                height: auto;
                /*margin-top: 10px;*/
            }
        </style>
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/layer/css/layui.css" asp-append-version="true" media="all" />
        <link rel="stylesheet" href="~/layer/css/admin.css" asp-append-version="true" media="all" />
        <link rel="stylesheet" href="~/layer/css/template.css" asp-append-version="true" media="all" />
        <style>
            .media img {
                display: block;
                max-width: 100%;
                height: auto;
                /*margin-top: 10px;*/
            }
        </style>
    </environment>
</head>
<body id="iosiframe">
    <div class="layui-fluid" id="detail">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-form" action="" lay-filter="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">购买数量</label>
                                <div class="layui-form-mid" id="buyCount">@ViewBag.Qty</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">需汇款金额</label>
                                <div class="layui-form-mid" id="buyMoney">@ViewBag.Amount.ToString("C")</div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title">
                                <legend>收货信息</legend>
                            </fieldset>
                            @if (u != null) {
                                if (m != null) {
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">收货人</label>
                                        <div class="layui-form-mid" id="receiver">@m.Receiver</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">联系电话</label>
                                        <div class="layui-form-mid" id="phone">@m.Phone</div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">收货地址</label>
                                        <div class="layui-form-mid" id="address" data-pro="@m.ProvinceId" data-city="@m.CityId" data-area="@m.AreaId">@ViewData["detail"]</div>
                                    </div>
                                }
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend>汇款信息</legend>
                                </fieldset>
                                <div class="layui-form-item">
                                    <div class="layui-col-lg12">
                                        <label class="layui-form-label">转账方式</label>
                                        <div class="layui-input-block">
                                            @foreach (var cash in cashs) {
                                                <input type="radio" value="@cash.value" id="Remittance" name="Remittance" title="@cash.text" lay-filter="radio">
                                            }
                                        </div>
                                    </div>
                                </div>

                                <div id="divBank">
                                    @if (s != null && s.Count > 0) {
                                        var name = s.FirstOrDefault(f => f.OtherType == ((int)Code.SystemType.收款人).ToString());
                                        var bank = s.FirstOrDefault(f => f.OtherType == ((int)Code.SystemType.收款银行).ToString());
                                        var account = s.FirstOrDefault(f => f.OtherType == ((int)Code.SystemType.收款账号).ToString());
                                        if (name != null) {
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">收款人</label>
                                                <div class="layui-form-mid">@name.Values</div>
                                            </div>
                                        }
                                        @if (bank != null) {
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">收款银行</label>
                                                <div class="layui-form-mid">@bank.Values</div>
                                            </div>
                                        }
                                        @if (account != null) {
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">收款卡号</label>
                                                <div class="layui-form-mid">@account.Values</div>
                                            </div>
                                        }
                                    }
                                </div>
                                <div id="divAlipay" style="display:none;">
                                    @if (s != null && s.Count > 0) {
                                        var alipay = s.FirstOrDefault(f => f.OtherType == ((int)Code.CashType.支付宝).ToString());
                                        if (alipay != null) {
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">收款人</label>
                                                <div class="layui-upload">
                                                    <a href="javascript:;">
                                                        <img class="layui-upload-img" style="width:50%; height:50%" id="alipayImg" src="@alipay.Values">
                                                    </a>
                                                </div>
                                            </div>
                                        }
                                    }
                                </div>
                                <div id="divWechat" style="display:none;">
                                    @if (s != null && s.Count > 0) {
                                        var wechat = s.FirstOrDefault(f => f.OtherType == ((int)Code.CashType.微信).ToString());
                                        if (wechat != null) {
                                            <div class="layui-form-item">
                                                <label class="layui-form-label">收款人</label>
                                                <div class="layui-upload">
                                                    <a href="javascript:;">
                                                        <img class="layui-upload-img" style="width:50%; height:50%" id="alipayImg" src="@wechat.Values">
                                                    </a>
                                                </div>
                                            </div>
                                        }
                                    }
                                </div>
                                @*<div class="layui-form-item">
                                        <label class="layui-form-label">汇款人</label>
                                        <div class="layui-input-inline"><input type="text" maxlength="20" id="Remittance" name="Remittance" placeholder="" lay-verify="" class="layui-input"></div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">汇款银行</label>
                                        <div class="layui-input-inline"><input type="text" maxlength="200" id="RemittanceBank" name="RemittanceBank" placeholder="" lay-verify="" class="layui-input"></div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">汇款号码</label>
                                        <div class="layui-input-inline"><input type="text" maxlength="100" id="RemittanceNo" name="RemittanceNo" placeholder="" lay-verify="" class="layui-input"></div>
                                    </div>*@
                                <div class="layui-form-item">
                                    <label class="layui-form-label">汇款凭证</label>
                                    <div class="layui-upload">
                                        <button type="button" class="layui-btn" id="uploadimg">上传图片</button><input class="layui-upload-file" type="file" accept="undefined">
                                        <input type="hidden" name="RemittanceImg" id="RemittanceImg" />
                                    </div>
                                </div>
                                <div class="layui-form-item" id="layui_img" style="display:none;">
                                    <div class="layui-col-lg6">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-upload">
                                            <img class="layui-upload-img" width="200" height="200" id="test-upload-normal-img">
                                        </div>
                                    </div>
                                </div>
                                @if (u != null && u.Level == Code.LevelCode.未激活) {
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="agreement" id="agreement" title="" lay-skin="primary" lay-verify="">同意<a href="javascript:;" id="aAgreement" style="color:#d30d0d">《橘红茶购货协议》</a>
                                    </div>
                                }
                                <hr />
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn  layui-btn-normal" lay-submit="" lay-filter="buy">确认购买</button>
                                        <a class="layui-btn  layui-btn-primary" href="@Url.Action("productinfo","order")">取 消</a>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (n != null) {
        <div class="layui-fluid" id="protocol" style="display:none;">
            <div class="layui-row layui-col-space6">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">购买协议</div>
                        <div class="layui-card-body">
                            <div class="layui-form-item">
                                <label class="layui-form-label">甲方</label>
                                <div class="layui-form-mid">@n.Name</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">乙方</label>
                                <div class="layui-form-mid">@u.UserName</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-body protocol">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    }
    <script src="~/layer/layui.js"></script>
    <script>

        layui.config({
            base: '../../layer/' //静态资源所在路径
        }).extend({
            index: 'index' //主入口模块
            }).use(['form', 'upload'], function () {
                var $ = layui.$
                    , upload = layui.upload
                    , form = layui.form;

                var ua = navigator.userAgent.toLowerCase();
                var screenwidth = window.screen.width;
                if (!/iphone|ipad|ipod/.test(ua)) {
                    $("#iosiframe").attr("scrolling", "auto");
                } else {
                    $('#iosiframe').width(screenwidth + 'px');
                }
                cashInfo = $('input[name="Remittance"]:checked').val();

                if (cashInfo == undefined) {
                    $("input[name='Remittance']").get(0).click();

                    form.render('radio');
                }


                var uploadInst = upload.render({
                    elem: '#uploadimg'
                    , url: '@Url.Action("filesave", "api")'
                    , accept: 'images'
                    , size: 2048
                    , done: function (res, index, upload) {
                        if (res.code == 0) {
                            $('#RemittanceImg').val(res.data.src);
                            $('#test-upload-normal-img').attr('src', res.data.src);
                            $('#layui_img').show()
                        } else {
                            window.parent.tools.alert(res.msg);
                        }
                    }
                });

                form.render('checkbox');
                form.render('radio');
                form.on('radio(radio)', function (data) {
                    if (data.value == 1) {
                        $('#divBank').show();
                        $('#divAlipay').hide();
                        $('#divWechat').hide();
                    }
                    else if (data.value == 2) {
                        $('#divBank').hide();
                        $('#divAlipay').show();
                        $('#divWechat').hide();
                    }
                    else {
                        $('#divBank').hide();
                        $('#divAlipay').hide();
                        $('#divWechat').show();
                    }
                });

                $('#aAgreement').on('click', function () {
                    window.parent.tools.open($('#protocol').html(), false, ['取消', '同意'], ['420px', '520px'], null, function (index) {
                        //$('#agreement').removeAttr('checked', '');
                        $('#agreement').click();
                        form.render('checkbox');
                        window.parent.tools.close(index);
                    }, function (index) {
                        //$('#agreement').attr('checked', 'checked');
                        $('#agreement').click();
                        form.render('checkbox');
                        window.parent.tools.close(index);
                    }, false);
                });

                form.on('submit(buy)', function (data) {
                    var proId = $('#address').attr('data-pro')
                        , cityId = $('#address').attr('data-city')
                        , areaId = $('#address').attr('data-area')
                        , qty = @ViewBag.Qty
                        , price = @ViewBag.Price
                        , remittanceImg =  $('#RemittanceImg').val();

                    if ($('#agreement').attr('id') && !$('#agreement').is(':checked')) {
                        window.parent.tools.msg("未同意购买协议");
                        return;
                    }

                    if (remittanceImg.length == 0) {
                        window.parent.tools.msg("请上传汇款凭证");
                        return;
                    }

                    if (isNaN(areaId)) areaId = 0;

                    var order = {
                        ProductName: '@ViewBag.Product'
                        , Receiver: $('#receiver').text()
                        , ProvinceId: proId
                        , CityId: cityId
                        , AreaId: areaId
                        , Address: $('#address').text()
                        , Phone: $('#phone').text()
                        , Count: qty
                        , Price: price
                        , Remittance: $('#Remittance').val()
                        , RemittanceBank: $('#RemittanceBank').val()
                        , RemittanceNo: $('#RemittanceNo').val()
                        , RemittanceImg: $('#RemittanceImg').val()
                    }

                    $.ajax({
                        url: '@Url.Action("saveorder", "api")',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify(order),
                        type: 'post'
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        window.parent.tools.alert(errorThrown, { icon: 2, title: textStatus });
                        }).done(function (res) {
                            window.parent.tools.alert(res.message, (res.code == 0 ? 1 : 2), function () {
                                if (res.code == 0) {
                                    location.href = '@Url.Action("productinfo","order")';
                                }
                            });
                        });
                });

                $('.layui-upload > a').on('click', function () {
                    var src = $(this).children('img').attr('src');

                    window.parent.tools.photos(src, '收款图');
                });

                var HtmlUtil = {
                    /*1.用浏览器内部转换器实现html转码*/
                    htmlEncode: function (html) {
                        //1.首先动态创建一个容器标签元素，如DIV
                        var temp = document.createElement("div");
                        //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
                        (temp.textContent != undefined) ? (temp.textContent = html) : (temp.innerText = html);
                        //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
                        var output = temp.innerHTML;
                        temp = null;
                        return output;
                    },
                    /*2.用浏览器内部转换器实现html解码*/
                    htmlDecode: function (text) {
                        //1.首先动态创建一个容器标签元素，如DIV
                        var temp = document.createElement("div");
                        //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
                        temp.innerHTML = text;
                        //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
                        var output = temp.innerText || temp.textContent;
                        temp = null;
                        return output;
                    }
                };

                var notice = '@if (n != null) {@n.Content}';

                $('.layui-card-body.protocol').html(HtmlUtil.htmlDecode(notice));
        });
    </script>
</body>
</html>
